<template>
  <Table highlight-current-row row-class-name="relation-selector-row"
         ref="table" @row-click="rowClick" @row-dblclick="dblclick" class="relation-selector-table"
         :data="dataSource" size="small" height="100%" border>
    <TableColumn align="center" width="55">
      <template v-if="multiple" #header>
        <a-checkbox v-if="selectedRows.length === dataSource.length" :checked="true" @click="toggleSelectAll" />
        <a-checkbox v-else :checked="false" @click="toggleSelectAll" />
      </template>
      <template v-if="!multiple" #default="{row}">
        <a-radio v-if="selectedRow(row)" :checked="true" />
        <a-radio v-else :checked="false" />
      </template>
      <template v-else #default="{row}">
        <a-checkbox v-if="selectedRow(row)" :checked="true"  />
        <a-checkbox v-else :checked="false"  />
      </template>
    </TableColumn>
    <TableColumn
      v-for="item in columns" show-overflow-tooltip
      resizable :prop="item.prop" :label="item.label"
      :width="item.width">
      <template #default="scope">
        <RelationColumnRender :columns="columns" :formDefinition="formDefinition" :columnScope="scope" />
      </template>
    </TableColumn>
    <TableColumn show-overflow-tooltip align="center" prop="操作" label="操作" width="150">
      <template #default="{row}">
        <a @click.stop="detailAction(row)">详情</a>
      </template>
    </TableColumn>
  </Table>
</template>
<script>
import { Table, TableColumn } from 'element-ui'
import { createProps } from '@/utils'
import { createFormDefinition } from '@comp/hhd/design/FormDesigner/types'
import { createManual } from '@comp/hhd/design/relation/types'
import { getFieldConfigById } from '@/utils/FormDesignUtils'
import { openWindow } from '@/utils/WindowUtils'
import RelationColumnRender
  from '@comp/hhd/design/FormEngine/RelationWrapper/RelationSelectorModal/table/RelationColumnRender.vue'

export default {
  name: 'RelationSelectorTable',
  components: {
    RelationColumnRender,
    Table,
    TableColumn
  },
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    manual: createProps(Object, createManual),
    loading: createProps(Boolean, false),
    dataSource: createProps(Array, () => []),
    currentSelectedRow: createProps(Object, () => undefined),
    multiple: createProps(Boolean, false)
  },
  data() {
    return {
      columns: [],
      selectedRows: []
    }
  },
  methods: {
    clearSelection() {
      this.$refs.table.clearSelection()
      this.changeCurrentSelectedRow()
    },
    selectedRow(row) {
      return !!this.selectedRows.includes(row)
    },
    changeCurrentSelectedRow(v) {
      this.$emit('update:currentSelectedRow', v)
    },
    getSelectionRows() {
      return this.selectedRows
    },
    dblclick(row) {
      if (this.multiple === false) {
        this.rowClick(row)
        this.$nextTick(() => {
          this.$emit('selected')
        })
      }
    },
    rowClick(row) {
      if (this.multiple === false) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(row)
        this.changeCurrentSelectedRow(row)
        this.selectedRows = [row]
      } else {
        //多选
        if (this.selectedRows.includes(row)) {
          let index = this.selectedRows.indexOf(row)
          this.selectedRows.splice(index, 1)
        } else {
          this.selectedRows.push(row)
        }
      }
    },
    toggleSelectAll() {
      if(this.selectedRows.length === this.dataSource.length) {
        this.selectedRows = []
      } else {
        this.selectedRows = this.dataSource
      }
    },
    detailAction(row) {
      openWindow(() => ['components/hhd/design/FormRelationManualDetailView/FormRelationManualDetailView', {
        props: {
          formDefinitionId: this.formDefinition.id,
          dataId: row[`${this.formDefinition.id}&formId`],
          relationId: this.manual.relationId,
          manualId: this.manual.id,
          manual: this.manual
        }
      }], {
        title: '单据详情',
        key: 'formRelationManualDetailView'
      })
    },
    getColumns() {
      let res = [], fieldColumns = this.manual && this.manual.fieldColumns || []
      if (this.formDefinition && this.manual) {
        fieldColumns.forEach(column => {
          let fieldId = column.fieldId
          let fieldConfig = getFieldConfigById(fieldId, this.formDefinition)
          if (!fieldConfig) return
          res.push({
            prop: fieldConfig.fieldTitleName && `${fieldId}&title` || fieldId,
            label: column.label || fieldConfig.label,
            width: 200,
            fieldName: fieldConfig.fieldName,
            fieldConfig
          })
        })
      }
      res.length && (res[res.length - 1].width = undefined)
      this.columns = res
    }
  },
  watch: {
    dataSource: {
      handler() {
        this.$nextTick(() => {
          this.$refs.table.clearSelection()
          this.selectedRows = [];
        })
      },
      immediate: true
    },
    formDefinition: {
      handler() {
        this.getColumns()
      },
      immediate: true
    },
    manual: {
      handler() {
        this.getColumns()
      },
      immediate: true
    }
  }
}
</script>
<style>
.relation-selector-table td,
.relation-selector-table th {
  border-color: #e4e7ed !important;
  color: #000000;
}

.relation-selector-table .el-table__column-resize-proxy {
  border-left: 2px dashed #e4e7ed;
}

.relation-selector-table .el-table--border::after,
.relation-selector-table .el-table--group::after {
  width: 0;
}

.relation-selector-table {
  border-left: none;
}

.relation-selector-table th {
  background: #f6f8fb !important;
}

.relation-selector-table th .el-checkbox {
  display: none;
}

.relation-selector-row {
  cursor: pointer;
}

.relation-selector-table .selection-checked {
  display: none;
}

.relation-selector-table .selection-not-checked {
  display: inline;
}

.relation-selector-table .current-row .selection-checked {
  display: inline;
}

.relation-selector-table .current-row .selection-not-checked {
  display: none;
}

.relation-selector-table .ant-radio-wrapper {
  margin: 0;
}
</style>